<template>
  <main>
    <!-- 头部部分 -->
    <header class="flex flex-row justify-around bg-white w-full"
      style="border-bottom: 1px solid var(--el-border-color)">
      <!-- Logo部分开始 -->
      <section class="flex justify-center items-center flex-shrink">
        <img src="../../assets/fpa_logo_compressed.png" class="w-12 h-12" alt="" />
        <span class="antialiased" style="margin-left:5px">自由编程协会开源社区</span>
      </section>
      <!-- Logo部分结束 -->
      <!-- 菜单部分开始 -->
      <el-menu :router="true" class="el-menu-demo w-1/2 flex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/">
          <template #title>
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/blog">
          <template #title>
            <el-icon>
              <Grid />
            </el-icon>
            <span>博客</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home">
          <template #title>
            <el-icon>
              <HelpFilled />
            </el-icon>
            <span>面经</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/leave">
          <template #title>
            <el-icon>
              <CircleCloseFilled />
            </el-icon>
            <span>请假</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/active">
          <template #title>
            <el-icon>
              <Ticket />
            </el-icon>
            <span>活动</span>
          </template>
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>关于</span>
          </template>
          <el-menu-item index="/resume">简介</el-menu-item>
          <el-menu-item index="/developer">开发者</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <!-- 菜单部分结束 -->
      <!-- 登录注册按钮开始 -->
      <section class="flex-shrink">
        <section class="w-32 h-12 flex justify-center items-center col-span-2" v-if="state.userInfo==null">
          <el-button type="primary" @click="handleLogin" size="large" round>登录</el-button>
          <el-button type="danger" @click="handleRegister" size="large" round>注册</el-button>
        </section>
        <section class="w-full h-full flex justify-center items-center content-center" v-else>
          <el-input v-model="searchVals" size="default" class="w-40 h-8 mr-2" placeholder="按回车键进行搜索">
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary">
            创作者中心
          </el-button>
          <el-icon style="font-size:25px" class="ml-1 mr-3">
            <InfoFilled />
          </el-icon>
          <img :src="state.userInfo.avatar" class="w-10 h-9 rounded-lg" alt="">
        </section>
      </section>

      <!-- 登录注册按钮结束 -->
    </header>
    <section class="p-6">
      <transition name="scale" mode="out-in">
        <RouterView />
      </transition>
    </section>
    <footer> </footer>
  </main>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { ElNotification } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  HomeFilled,
  Setting,
  Ticket,
  InfoFilled,
  List,
  HelpFilled,
  Grid,
  Search,
  CircleCloseFilled
} from '@element-plus/icons-vue'
import { Session } from '../../utils/storage.ts'
import router from '../../router';
// 在页面加载的时候判断登录状态

const searchVals = ref(null);

const state = reactive({
  userInfo: null
})

onMounted(() => {
  state.userInfo = Session.get('userInfo')
})


const handleLogin=()=>{
  router.push('/login')
}

const handleRegister=()=>{
  ElNotification({
    title: '暂未开放注册功能',
    message: '请使用学号和密码进行登录',
    type: 'warning',
  })
}

const handleSelect = (key: string, keyPath: string[]) => {
  if (key == '/home') {
    window.open('http://localhost:8080', '_self')
  }
}
</script>
    
<style scoped>
.scale-enter-active,
.scale-leave-active {
  transition: all 0.4s ease;
}


.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>